<template>
    <div class='home-container'>
        <SideNav :openeds="openeds" :activeTab="activeTab"></SideNav>
        <div class='right-container'>
            <Header class="header" :headerList="headerList"></Header>
            <div class="right-content white-color">
                <div class="add-title">
                    <img src="../../src/assets/img/welcome/add.png" alt="">
                    <span>新增试题</span>
                </div>
                <div class="add-form-container">
                    <div class="btn-container">
                        <div :class='{"active-color": active === "ALL"}' @click='changTab("ALL")'>单选</div>
                        <div :class='{"active-color": active ===1}' @click='changTab(1)'>多选</div>
                        <div :class='{"active-color": active ===2}' @click="changTab(2)">判断</div>
                        <div :class='{"active-color": active===3}' @click='changTab(3)'>填空
                        </div>
                    </div>
                    <el-form ref="form" v-if='active === "ALL"' :model="form" label-width="120px"
                        class="add-form addQuestions">
                        <el-row>
                            <el-col :span="16">
                                <el-form-item label="学科">
                                    <el-select v-model="form.region" placeholder="请选择">
                                        <el-option label="1班" value="shanghai"></el-option>
                                        <el-option label="2班" value="beijing"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8"></el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="16">
                                <el-form-item label="题目">
                                    <el-input v-model="form.name" placeholder="请填写题目信息"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8"></el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="图片">
                                    <el-upload class="upload-demo" drag
                                        action="https://jsonplaceholder.typicode.com/posts/" multiple>
                                        <img src="../../src/assets/img/welcome/uploadImg.png" alt="">
                                        <div class="el-upload__text"><em>点击上传</em>或拖拽图片到此</div>
                                    </el-upload>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8"></el-col>
                        </el-row>
                        <el-row v-for="(item, index) in arr" :key="index">
                            <el-col :span="16">
                                <el-form-item :label="item.title">
                                    <el-input v-model="item.content" placeholder="这里是选项内容，可选择和添加删除"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8" class="time-contain">
                                <div class="circle-contain">
                                    <div v-if="!item.type" class="circle" @click="changeTrue(item, index)"></div>
                                    <img src="../../src/assets/img/welcome/true.png" alt="" v-if="item.type"
                                        @click="changeTrue(item, index)">
                                </div>
                                <span class="text">设为正确答案</span>
                                <span class="delete">删除</span>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="16">
                                <el-form-item label="">
                                    <el-button type="plain" class="add-btn">
                                        <i class="el-icon-plus"></i>
                                        <span>添加选项</span>
                                    </el-button>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8" class="time-contain">

                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="16">
                                <el-form-item label="讲义">
                                    <el-input v-model="form.name" type="textarea"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8" class="teacher-contain">
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="16">
                                <el-form-item class="btn-group">
                                    <el-button type="primary">确定</el-button>
                                    <el-button>重置</el-button>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8"></el-col>
                        </el-row>
                    </el-form>
                    <el-form ref="form" v-if='active === 1' :model="form" label-width="120px"
                        class="add-form addQuestions">
                        <el-row>
                            <el-col :span="16">
                                <el-form-item label="学科">
                                    <el-select v-model="form.region" placeholder="请选择">
                                        <el-option label="1班" value="shanghai"></el-option>
                                        <el-option label="2班" value="beijing"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8"></el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="16">
                                <el-form-item label="题目">
                                    <el-input v-model="form.name" placeholder="请填写题目信息"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8"></el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="图片">
                                    <el-upload class="upload-demo" drag
                                        action="https://jsonplaceholder.typicode.com/posts/" multiple>
                                        <img src="../../src/assets/img/welcome/uploadImg.png" alt="">
                                        <div class="el-upload__text"><em>点击上传</em>或拖拽图片到此</div>
                                    </el-upload>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8"></el-col>
                        </el-row>
                        <el-row v-for="(item, index) in arr2" :key="index">
                            <el-col :span="16">
                                <el-form-item :label="item.title">
                                    <el-input v-model="item.content" placeholder="这里是选项内容，可选择和添加删除"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8" class="time-contain">
                                <div class="circle-contain">
                                    <div v-if="!item.type" class="circle" @click="changeMoreTrue(item, index)"></div>
                                    <img src="../../src/assets/img/welcome/true.png" alt="" v-if="item.type"
                                        @click="changeMoreTrue(item, index)">
                                </div>

                                <span class="text">设为正确答案</span>
                                <span class="delete">删除</span>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="16">
                                <el-form-item label="">
                                    <el-button type="plain" class="add-btn">
                                        <i class="el-icon-plus"></i>
                                        <span>添加选项</span>
                                    </el-button>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8" class="time-contain">

                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="16">
                                <el-form-item label="讲义">
                                    <el-input v-model="form.name" type="textarea"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8" class="teacher-contain">
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="16">
                                <el-form-item class="btn-group">
                                    <el-button type="primary">确定</el-button>
                                    <el-button>重置</el-button>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8"></el-col>
                        </el-row>
                    </el-form>
                    <!-- 判断 -->
                    <el-form ref="form" v-if='active === 2' :model="form" label-width="120px"
                        class="add-form addQuestions">
                        <el-row>
                            <el-col :span="16">
                                <el-form-item label="学科">
                                    <el-select v-model="form.region" placeholder="请选择">
                                        <el-option label="1班" value="shanghai"></el-option>
                                        <el-option label="2班" value="beijing"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8"></el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="16">
                                <el-form-item label="题目">
                                    <el-input v-model="form.name" placeholder="请填写题目信息"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8"></el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="图片">
                                    <el-upload class="upload-demo" drag
                                        action="https://jsonplaceholder.typicode.com/posts/" multiple>
                                        <img src="../../src/assets/img/welcome/uploadImg.png" alt="">
                                        <div class="el-upload__text"><em>点击上传</em>或拖拽图片到此</div>
                                    </el-upload>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8"></el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="16">
                                <el-form-item label="判断">
                                    <el-radio v-model="radio" label="1">正确</el-radio>
                                    <el-radio v-model="radio" label="2">错误</el-radio>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8" class="time-contain">

                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="16">
                                <el-form-item label="讲义">
                                    <el-input v-model="form.name" type="textarea"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8" class="teacher-contain">
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="16">
                                <el-form-item class="btn-group">
                                    <el-button type="primary">确定</el-button>
                                    <el-button>重置</el-button>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8"></el-col>
                        </el-row>
                    </el-form>
                    <!-- 填空 -->
                    <el-form ref="form" v-if='active === 3' :model="form" label-width="120px"
                        class="add-form addQuestions">
                        <el-row>
                            <el-col :span="16">
                                <el-form-item label="学科">
                                    <el-select v-model="form.region" placeholder="请选择">
                                        <el-option label="1班" value="shanghai"></el-option>
                                        <el-option label="2班" value="beijing"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8"></el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="16">
                                <el-form-item label="题目">
                                    <el-input v-model="form.name" placeholder="请填写题目信息"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8"></el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="图片">
                                    <el-upload class="upload-demo" drag
                                        action="https://jsonplaceholder.typicode.com/posts/" multiple>
                                        <img src="../../src/assets/img/welcome/uploadImg.png" alt="">
                                        <div class="el-upload__text"><em>点击上传</em>或拖拽图片到此</div>
                                    </el-upload>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8"></el-col>
                        </el-row>
                        <el-row v-for="(item, index) in arr4" :key="index">
                            <el-col :span="16">
                                <el-form-item :label="item.title">
                                    <el-input v-model="item.content" placeholder="这里是选项内容，可选择和添加删除"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8" class="time-contain">
                                <span class="delete4">删除</span>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="16">
                                <el-form-item label="">
                                    <el-button type="plain" class="add-btn">
                                        <i class="el-icon-plus"></i>
                                        <span>添加选项</span>
                                    </el-button>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8" class="time-contain">

                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="16">
                                <el-form-item label="讲义">
                                    <el-input v-model="form.name" type="textarea"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8" class="teacher-contain">
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="16">
                                <el-form-item class="btn-group">
                                    <el-button type="primary">确定</el-button>
                                    <el-button>重置</el-button>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8"></el-col>
                        </el-row>
                    </el-form>
                </div>

            </div>
        </div>
    </div>
</template>

<script>
import SideNav from '@/components/SideNav'
export default {
    name: 'home',
    data() {
        return {
            headerList: ['题库', '试题', '新增试题'],
            openeds: ['c', 'c-1'],
            activeTab: 'Tv',
            active: 'ALL',
            form: {
                name: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: ''
            },
            arr: [{
                title: '选项A',
                type: true,
                content: ' 答案内容'
            }, {
                title: '选项B',
                type: false,
                content: ' 答案内容'
            }],
            arr2: [{
                title: '选项A',
                type: true,
                content: ' 答案内容'
            }, {
                title: '选项B',
                type: false,
                content: ' 答案内容'
            }],
            arr4: [{
                title: '第一空',
                type: true,
                content: ' 答案内容'
            }, {
                title: '第二空',
                type: false,
                content: ' 答案内容'
            }],
            radio: '1'
        }
    },
    methods: {
        handleOpen(key, keyPath) {
            console.log(key, keyPath)
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath)
        },
        changTab(index) {
            this.active = index
        },
        changeTrue(item, index) {
            // eslint-disable-next-line no-return-assign
            this.arr.map(it => it.type = false)
            this.arr[index].type = !this.arr[index].type
        },
        changeMoreTrue(item, index) {
            this.arr2[index].type = !this.arr2[index].type
        }
    },
    components: {
        SideNav
    }
}

</script>
<style lang="less" scoped>
    @import url('../../src/assets/less/Mixins.less');
    @import url('../../src/assets/less/common.less');

    html,
    body {
        height: 100%
    }

    .add-title {
        height: 70px;
        line-height: 70px;
        padding-left: 30px;

        img {
            height: 20px;
            width: 20px;
            position: relative;
            top: 4px;
            margin-right: 12px;
        }

        span {
            font-size: 20px;
            font-family: PingFang-SC-Regular;
            font-weight: 400;
        }
    }

    .add-form-container {
        width: calc(100% - 60px);
        margin: auto;
        border: 1px solid rgba(221, 223, 230, 1);

        .add-form {
            width: calc(100% - 230px);
            min-width: 980px;
            margin: auto;
            margin-top: 30px;
        }

        .el-select {
            width: 100%
        }

        div.btn-container {
            padding-top: 18px;
            width: calc(100% - 540px);
            .flex(row, space-between, center, nowrap);

            margin: auto;
            height: 44px;

            >div {
                width: 70px;
                height: 40px;
                border-radius: 3px;
                border: 1px solid rgba(96, 98, 102, 0.34);
                text-align: center;
                line-height: 40px;
                font-size: 14px;
                font-family: PingFang-SC-Regular;
                font-weight: 400;
                color: rgba(96, 98, 102, 1);
                cursor: pointer
            }

            .active-color {
                // #53CC90
                background: rgba(85, 168, 253, 1);
                border: solid 1px rgba(85, 168, 253, 1);
                color: #fff;
                position: relative;

                &:after {
                    position: absolute;
                    content: '';
                    border-left: 5px solid transparent;
                    border-right: 5px solid transparent;
                    border-top: 5px solid rgba(85, 168, 253, 1);
                    top: 40px;
                    left: 32px;

                }
            }
        }
    }

    .time-contain {
        font-size: 14px;
        font-family: PingFang-SC-Regular !important;
        font-weight: 400;
        color: rgba(28, 28, 28, 1);
        height: 40px;
        line-height: 40px;

        .circle-contain {
            display: inline-block;
            width: 50px;
        }

        .circle {
            width: 14px;
            height: 14px;
            border-radius: 7px;
            border: solid 1px #DDDFE6;
            cursor: pointer;
            margin-left: 30px;
            margin-right: 10px;
            float: left;
            position: relative;
            top: 4px;

        }

        .text {
            margin-right: 40px;
        }

        .delete {
            cursor: pointer;
        }

        .delete4 {
            margin-left: 30px
        }

        img {
            width: 24px;
            height: 24px;
            margin-left: 26px;
            position: relative;
            top: 10px;
        }
    }

</style>
<style lang="less">
    .left-container {
        ul {
            background-color: #22345E
        }
    }

    .btn-group {
        >div {
            text-align: center
        }
    }

    .date-line {
        text-align: center !important
    }

    // 下拉选
    .el-select-dropdown__item.hover,
    .el-select-dropdown__item:hover {
        background-color: #55a8fd !important;
        color: #ffffff !important;
    }

    .el-select-dropdown__list {
        padding-top: 0px !important;
        padding-bottom: 0px !important;
        font-size: 14px !important;
        font-family: PingFang-SC-Regular !important;
        font-weight: 400;
    }

    .popper__arrow {
        display: none !important;
    }

    // 日历
    .el-picker-panel__body {
        font-family: PingFang-SC-Regular !important;
    }

    .addQuestions {
        .upload-demo {
            img {
                height: 50px !important;
                width: 55px !important;
                margin-top: 15px !important;
            }

            .el-upload-dragger {
                height: 128px !important;
            }
        }

        .add-btn {
            width: 205px;
            height: 40px;
            border-radius: 4px;
            border: 1px solid rgba(85, 168, 253, 1);
            color: #55A8FD
        }

        .el-input {
            min-width: 534px;
        }

        .time-contain {
            min-width: 195px;
        }

        textarea {
            min-height: 100px !important
        }
    }

    .time-contain {
        font-size: 14px;
        font-family: PingFang-SC-Regular !important;
        font-weight: 400;

    }

    @import url('../../src/assets/less/override-element-ui.less');

</style>
